<!-- uniapp使用echarts -->
<template>
	<view class="container">
		<view><text>图表区域</text></view>
		<!-- <view> -->
			<mpvue-echarts ref="lineChart" :echarts="echarts" />
			<button @click="showChart">click</button>
		<!-- </view> -->
	</view>
</template>

<script>
	import * as echarts from 'components/echarts/echarts.min.js' /*chart.min.js为在线定制*/
	import mpvueEcharts from 'components/mpvue-echarts/src/echarts.vue'

	export default {
		data() {
			return {
				echarts
			}
		},
		components: {
			mpvueEcharts
		},
		methods: {
			showChart() {
				console.log(this.$refs.lineChart)
				var option = {
					legend: {},
					tooltip: {},
					dataset: {
						// 提供一份数据。
						source: [
							['product', '2015', '2016', '2017'],
							['Matcha Latte', 43.3, 85.8, 93.7],
							['Milk Tea', 83.1, 73.4, 55.1],
							['Cheese Cocoa', 86.4, 65.2, 82.5],
							['Walnut Brownie', 72.4, 53.9, 39.1]
						]
					},
					// 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
					xAxis: {
						type: 'category'
					},
					// 声明一个 Y 轴，数值轴。
					yAxis: {},
					// 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
					series: [{
							type: 'bar'
						},
						{
							type: 'bar'
						},
						{
							type: 'bar'
						}
					]
				}
				var canvasdata = this.$refs.lineChart
				this.initChart(canvasdata, option)
			},
			initChart(e, option) {
				let {
					canvas
				} = e;
				let width = 420
				let height = 300
				width = width - 20;
				echarts.setCanvasCreator(() => canvas);
				const chart = echarts.init(canvas, null, {
					width: width,
					height: height
				})

				canvas.setChart(chart)
				chart.setOption(option)
				this.$refs.lineChart.setChart(chart);
			}
		}
	}
</script>

<style>
	page,
	.container {
		height: 500px;
	}

	.container {
		padding: 0 10px;
	}
</style>
